08. Add an Image

Add an Image

IMAGES! Images on the web are awesome. Time to make one.

For this exercise, you'll be linking an image in your Workspace. I'll give you the URL of an image and it will be your job to make it display.

An image is made with an <img> element. It looks like so:

<img src="http://somewebsite.com/image.jpg" alt="short description">

The source attribute, src, is like the href of a link - it is the URL of the image you want to display. For now, your images will need to be hosted online, which means that the URL will need to start with http:// or https://. You'll learn about another way to set image source in the next exercise. The alt attribute stands for "alternative description," which is important for people who use screen readers to browse the web. This is text that will show up in lieu of the actual image.

An image element is a little different than the elements you've seen before. Images do not need closing tags! (For the eager, these are called "void elements".)

Here's the MDN reference about images.

How to complete this exercise

Look at the Workspace, below. You'll find the file index.html inside. Edit index.html in the workspace and watch your website change in the preview panel.

For this exercise, you need to create an image tag in the space provided and link it to the URL given in the HTML comment. Here's an example of what the HTML for an image element would look like:

<img src="http://somewebsite.com/image.jpg" alt="short description">

I want you to:

1. Create an <img> tag at the designated spot in the paragraph below.

• Set the source to: http://udacity.github.io/fend/images/udacity.png
• Set the tag's alt attribute to a description of the image (maybe something like, "Udacity logo").

Try playing around with the URL for the image to see if you can make a different image appear!